<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>我的收藏 - 局域网视频学习系统</title>
    <link rel="stylesheet" href="../css/common.css">
    <style>
        .favorites-container {
            max-width: 1200px;
            margin: 0 auto;
            padding: 20px;
        }

        .page-header {
            background: white;
            padding: 20px;
            border-radius: 8px;
            box-shadow: var(--shadow);
            margin-bottom: 20px;
        }

        .page-title {
            font-size: 24px;
            font-weight: bold;
            color: var(--neutral-dark);
            margin-bottom: 8px;
        }

        .page-subtitle {
            color: #666;
            font-size: 14px;
        }

        .favorites-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
            gap: 20px;
        }

        .favorite-item {
            background: white;
            border-radius: 8px;
            box-shadow: var(--shadow);
            overflow: hidden;
            transition: transform 0.3s ease, box-shadow 0.3s ease;
        }

        .favorite-item:hover {
            transform: translateY(-2px);
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
        }

        .favorite-thumbnail {
            width: 100%;
            height: 180px;
            background: #f0f0f0;
            display: flex;
            align-items: center;
            justify-content: center;
            color: #999;
            font-size: 48px;
            position: relative;
        }

        .favorite-thumbnail::before {
            content: '🎥';
        }

        .favorite-info {
            padding: 16px;
        }

        .favorite-title {
            font-size: 16px;
            font-weight: 600;
            color: var(--neutral-dark);
            margin-bottom: 8px;
            line-height: 1.4;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
            overflow: hidden;
        }

        .favorite-meta {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 12px;
            font-size: 12px;
            color: #666;
        }

        .favorite-description {
            font-size: 14px;
            color: #666;
            line-height: 1.5;
            margin-bottom: 12px;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
            overflow: hidden;
        }

        .favorite-actions {
            display: flex;
            gap: 8px;
        }

        .favorite-btn {
            flex: 1;
            padding: 8px 12px;
            border: none;
            border-radius: 6px;
            cursor: pointer;
            font-size: 14px;
            transition: background 0.3s ease;
        }

        .favorite-btn.primary {
            background: var(--primary-color);
            color: white;
        }

        .favorite-btn.primary:hover {
            background: #1e5f7a;
        }

        .favorite-btn.danger {
            background: #ffebee;
            color: #d32f2f;
        }

        .favorite-btn.danger:hover {
            background: #ffcdd2;
        }

        .empty-state {
            text-align: center;
            padding: 60px 20px;
            color: #666;
        }

        .empty-state i {
            font-size: 64px;
            margin-bottom: 16px;
            opacity: 0.5;
        }

        .empty-state h3 {
            font-size: 18px;
            margin-bottom: 8px;
            color: var(--neutral-dark);
        }

        .empty-state p {
            font-size: 14px;
            margin-bottom: 20px;
        }

        .loading {
            text-align: center;
            padding: 40px;
            color: #666;
        }

        .stats-bar {
            display: flex;
            gap: 20px;
            margin-bottom: 20px;
        }

        .stat-item {
            background: white;
            padding: 16px;
            border-radius: 8px;
            box-shadow: var(--shadow);
            text-align: center;
            flex: 1;
        }

        .stat-number {
            font-size: 24px;
            font-weight: bold;
            color: var(--primary-color);
            margin-bottom: 4px;
        }

        .stat-label {
            font-size: 14px;
            color: #666;
        }
    </style>
</head>
<body>
    <!-- 顶部导航栏 -->
    <nav class="navbar">
        <div class="container-fluid">
            <div style="display: flex; justify-content: space-between; align-items: center; width: 100%;">
                <a href="index.html" class="navbar-brand">
                    📚 局域网视频学习系统
                </a>
                <div style="display: flex; align-items: center; gap: 20px;">
                    <a href="index.html" style="color: var(--neutral-dark); text-decoration: none;">
                        🏠 首页
                    </a>
                    <a href="favorites.html" style="color: var(--neutral-dark); text-decoration: none;">
                        ❤️ 我的收藏
                    </a>
                    <a href="playlists.html" style="color: var(--neutral-dark); text-decoration: none;">
                        📋 播放列表
                    </a>
                    <a href="exams.html" style="color: var(--neutral-dark); text-decoration: none;">
                        📝 考试中心
                    </a>
                    <a href="profile.html" style="color: var(--neutral-dark); text-decoration: none;">
                        👤 个人资料
                    </a>
                    <span style="color: var(--neutral-dark);">
                        <span data-user-name>学生</span>
                    </span>
                    <button onclick="logout()" class="logout-btn">
                        退出登录
                    </button>
                </div>
            </div>
        </div>
    </nav>

    <div class="container">

        <div class="favorites-container">
            <!-- 页面头部 -->
            <div class="page-header">
                <div class="page-title">我的收藏</div>
                <div class="page-subtitle">管理您收藏的视频内容</div>
            </div>

            <!-- 统计信息 -->
            <div class="stats-bar">
                <div class="stat-item">
                    <div class="stat-number" id="totalFavorites">0</div>
                    <div class="stat-label">收藏总数</div>
                </div>
                <div class="stat-item">
                    <div class="stat-number" id="totalViews">0</div>
                    <div class="stat-label">总观看次数</div>
                </div>
                <div class="stat-item">
                    <div class="stat-number" id="totalDuration">0</div>
                    <div class="stat-label">总时长</div>
                </div>
            </div>

            <!-- 收藏列表 -->
            <div id="favoritesContent">
                <div class="loading">
                    <div class="loading-pulse" style="margin-bottom: 12px;"></div>
                    <p>加载收藏列表...</p>
                </div>
            </div>
        </div>
    </div>

    <script src="../js/common.js"></script>
    <script>
        let favorites = [];

        // 页面初始化
        document.addEventListener('DOMContentLoaded', function() {
            loadFavorites();
        });

        // 加载收藏列表
        async function loadFavorites() {
            try {
                const userId = UserManager.getUserId();
                const response = await API.get(`/favorite/user/${userId}`);
                
                if (response.success) {
                    favorites = response.favorites || [];
                    renderFavorites();
                    updateStats();
                } else {
                    showError('加载收藏列表失败');
                }
            } catch (error) {
                console.error('加载收藏列表失败:', error);
                showError('加载收藏列表失败，请稍后重试');
            }
        }

        // 渲染收藏列表
        function renderFavorites() {
            const container = document.getElementById('favoritesContent');
            
            if (favorites.length === 0) {
                container.innerHTML = `
                    <div class="empty-state">
                        <i>❤️</i>
                        <h3>暂无收藏</h3>
                        <p>您还没有收藏任何视频</p>
                        <a href="index.html" class="btn btn-primary">浏览视频</a>
                    </div>
                `;
                return;
            }

            container.innerHTML = `
                <div class="favorites-grid">
                    ${favorites.map(favorite => `
                        <div class="favorite-item">
                            <div class="favorite-thumbnail"></div>
                            <div class="favorite-info">
                                <div class="favorite-title">${favorite.videoTitle}</div>
                                <div class="favorite-meta">
                                    <span>${favorite.uploaderName}</span>
                                    <span>${Utils.formatTime(favorite.uploadTime)}</span>
                                </div>
                                <div class="favorite-description">${favorite.videoIntro || '暂无简介'}</div>
                                <div class="favorite-actions">
                                    <button class="favorite-btn primary" onclick="playVideo(${favorite.videoId})">
                                        播放视频
                                    </button>
                                    <button class="favorite-btn danger" onclick="removeFavorite(${favorite.id})">
                                        取消收藏
                                    </button>
                                </div>
                            </div>
                        </div>
                    `).join('')}
                </div>
            `;
        }

        // 更新统计信息
        function updateStats() {
            const totalFavorites = favorites.length;
            const totalViews = favorites.reduce((sum, fav) => sum + (fav.viewCount || 0), 0);
            
            document.getElementById('totalFavorites').textContent = totalFavorites;
            document.getElementById('totalViews').textContent = totalViews;
            document.getElementById('totalDuration').textContent = '--';
        }

        // 播放视频
        function playVideo(videoId) {
            window.location.href = `player.html?id=${videoId}`;
        }

        // 取消收藏
        async function removeFavorite(favoriteId) {
            if (!confirm('确定要取消收藏这个视频吗？')) return;
            
            try {
                const response = await API.delete(`/favorite/${favoriteId}`);
                
                if (response.success) {
                    Message.success('已取消收藏');
                    loadFavorites(); // 重新加载列表
                } else {
                    Message.error(response.message);
                }
            } catch (error) {
                console.error('取消收藏失败:', error);
                Message.error('取消收藏失败，请稍后重试');
            }
        }

        // 显示错误信息
        function showError(message) {
            const container = document.getElementById('favoritesContent');
            container.innerHTML = `
                <div class="empty-state">
                    <i>❌</i>
                    <h3>加载失败</h3>
                    <p>${message}</p>
                    <button class="btn btn-primary" onclick="loadFavorites()">重新加载</button>
                </div>
            `;
        }

        // 退出登录
        async function logout() {
            if (confirm('确定要退出登录吗？')) {
                try {
                    UserManager.logout();
                    window.location.href = '../login.html';
                } catch (error) {
                    console.error('退出登录失败:', error);
                    Message.error('退出登录失败');
                }
            }
        }
    </script>
</body>
</html>